<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.mui-search {
			margin-top: 28px;
			padding: 0px 10px;
		}
		.mui-search input[type=search] {
			border-radius: 15px;
			background-color: #FFFFFF;
			border:1px solid #4B0505
		}
		.mui-search .mui-placeholder {
			left: 20px;
			color: #ffe360;
			text-align: left;
		}
		.search-container {
			width: 100%;
		}
		.search-title-div {
			font-size: 10px;
			color: #2F2F2F;
			font-family: "PingFang-SC-Regular";
			margin-left: 14px;
		}
		.search-title-container {
			margin-left: 14px;
		}
		.item-title {
			margin: 5px;
			border:1px solid #C5C5C5;
			border-radius: 15px;
			padding: 5px 15px;
			display: inline-block;
			font-size: 13px;
			font-family: "PingFang-SC-Regular";
		}
		.empty_list {
			padding-top: 200px;
			display: none;
		}
		.top-search-div {
			width: 100%;
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: 100;
		}
		.mui-scroll-wrapper {
			top: 98px;
		}
	</style>
	<body>
		<div class="mui-content">
			<div id="searchDiv" class="top-search-div">
				<form id="noSubmit" action="" onsubmit="return submitTest();">
					<div class="mui-search">
						<input id="searchName" type="search" placeholder="请输入内容">
					</div>
				</form>
				<div class="search-container">
					<div class="search-title-div">最近搜索</div>
					<div id="historydiv" class="search-title-container">
						<!--<div class="item-title">哈哈</div>-->
					</div>
				</div>
			</div>
			<div id="pullrefresh" class="mui-scroll-wrapper">
				<ul id="specialul" class="mui-table-view mui-grid-view">
			        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
		                <div class="mui-media-object">
		                		<img class="special-image" src="../img/index/tuijian_bg.png" />
		                		<div class="special-info-div">
		                			<div class="special-text">夹心蒸蛋糕</div>
		                			<div class="special-collect-div">
		                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
		                				<span class="collect-span">333人</span>
		                			</div>
		                		</div>
		                		<div class="special-info-div">
		                			<div class="special-price">25.80¥</div>
		                			<div class="add-shopping-car-div"></div>
		                		</div>
		                	</div>
			        </li>-->
			    </ul>
		    </div>
		    <div class="empty_list">暂无该商品，换个词搜索吧！</div>
		</div>
		<div class="common-back-div">
			<img class="common-back-img" src="../img/common/public_back.png" />
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		"use strict";
		var tempHistorySearchsList = [];
		var tempKeyword = "";
		var userID = base.getParameter("userID");
		var FIRST_PAGE_NO = 1;
		var saved = base.getSavedData();
		var query = saved.query || {
			pageNo: FIRST_PAGE_NO,
			dir: 'none'
		};
		getSearchData();//获取搜索记录数据
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		function pulldownRefresh() {
			query.pageNo = FIRST_PAGE_NO;
			query.dir = 'down';
			searchContent(tempKeyword, query.pageNo);
		}

		function pullupRefresh() {
			query.pageNo++;
			query.dir = 'up';
			searchContent(tempKeyword, query.pageNo);
		}

		function searchContent(keyword, page) {
			document.activeElement.blur();
			tempKeyword = keyword;
			base.setWait('正在获取数据...');
			$(this).blur();
			query.pageNo = page;
			var url = base.url.searchResult;
			var data = {
				userID: userID,
				keyword:keyword,
				pageNo: page,
			};
			base.postData(url,data,searchResultSuccess);
		}
		function searchResultSuccess(data) {
			base.clearWait();
			if(data.success === true && data.context) {
				var index = customContains(tempHistorySearchsList, tempKeyword); //判断搜索记录中是否有该元素
				if (index == -1) {
					$("#historydiv").prepend('<div class="item-title">'+tempKeyword+'</div>');//添加搜索纪录的关键词数组
					var _height=document.getElementById("searchDiv").offsetHeight;
					$(".mui-scroll-wrapper").css("top", _height+"px");
				}
				var params = {"keyword": tempKeyword};
				tempHistorySearchsList.push(params); //把刚刚搜索的关键词存入全局变量
				var list = data.context.goodsList||[];
				if(!list || !list.length) {
					if(query.pageNo == FIRST_PAGE_NO) {
						$('#pullrefresh').hide();
						$('.empty_list').show();
					}
					if (query.dir === 'down') {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					} else if (query.dir === 'up') {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					}
				} else {
					$('.empty_list').hide();
					$('#pullrefresh').show();
					if(query.dir === 'up') {
						showList(list, saved.list.length);
						saved.list = saved.list.concat(list);
					} else {
						showList(list);
						saved.list = list;
					}
				}
				if(query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().refresh(true);
				} else if(query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}
			} else {
				if(query.pageNo == FIRST_PAGE_NO) {
					$('#pullrefresh').hide();
					$('.empty_list').show();
				}
				if (query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				} else if (query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
			}
			query.dir = 'none';
		}
		function showList(list) {
			var html = '';
			for (var i in list) {
				html += getGoodsListItem(list[i], i);
			}
			$("#specialul").html(html);
		}
		function getGoodsListItem(item, index) {
			var html = '';
			html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
			html += '	<div class="mui-media-object">'
			html += '		<img class="special-image" src="'+item.goodsImg+'" />'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-text">'+(item.goodsName.length>7?(item.goodsName.substring(0, 6)+'...'):item.goodsName)+'</div>'
			html += '			<div class="special-collect-div">'
			html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
			html += '				<span class="collect-span">'+item.popularity+'人</span>'
			html += '			</div>'
			html += '		</div>'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-price">'+(item.price/100)+'¥</div>'
			html += '			<div class="add-shopping-car-div"></div>'
			html += '		</div>'
			html += '	</div>'
			html += '</li>'
			return html;
		}
		function submitTest(){
			return false;
		}
		//判断当前搜索的关键词是否存在
		function customContains(arr, obj) {
		    var i = arr.length;
		    while(i--) {
		        if(arr[i].keyword === obj) {
		            return i;
		        }
		    }
		    return -1;
		}
//		$("#searchName").bind("focus", function () {
//			$(this).focus();
//		});	
		$('#searchName').on('keydown',function(e) {
	        var keycode = e.keyCode;
	        var keyword = $(this).val();
	        if(keycode=='13'){
	        		query.pageNo = FIRST_PAGE_NO;
	        		searchContent(keyword, query.pageNo);
	        }
	    });
	    //获得搜索记录数据
	    function getSearchData(){
	    		base.setWait('正在搜索数据...');
			var url = base.url.getSearchData;
			var data = {
				userID: userID
			}
			base.postData(url,data,getSearchDataSuccess);
		};
		function getSearchDataSuccess(data) {
			base.clearWait();
			if (data.success) {
				tempHistorySearchsList = data.context.historySearchs;
				var html = '';
				for(var index in tempHistorySearchsList) {
					html += getHistorySearchsListItem(tempHistorySearchsList[index], index);
				}
				$("#historydiv").html(html);
				var _height=document.getElementById("searchDiv").offsetHeight;
				$(".mui-scroll-wrapper").css("top", _height+"px");
			} else {
				mui.toast(data.msg);
			}
		}
		function getHistorySearchsListItem(item, index) {
			var html = '';
			html += '<div class="item-title">'+item.keyword+'</div>'
			return html;
		}
		$("#historydiv").on('tap','.item-title',function(){
			var keyword = $(this).text();
			query.pageNo = FIRST_PAGE_NO;
			searchContent(keyword, query.pageNo);
		});
		$("#specialul").on("tap", ".mui-table-view-cell", function() {
			var index = $(this).data('index');
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+saved.list[index].goodsID+'&merchantID='+saved.list[index].merchantID;
		})
		$(".common-back-div").on('tap','.common-back-img',function(){
			mui.back();
		});
	</script>
</html>
